<template>
  <div class="head_container flex_bt">
    <div class="left fff">
      <div class="left_inner flex_bt">
        <div class="flex one">
          <img
            style="width: 36px; height: 36px"
            src="../assets/head_imgs/head_logo.png"
            alt=""
          />
          <div>欣心</div>
        </div>
        <div class="flex two cur_poi">
          <div class="switch_btn" @click="handleSwitch">切换</div>
          <img
            style="width: 24px; height: 24px"
            src="../assets/hot_h.png"
            alt=""
          />
          <div>0</div>
        </div>
      </div>
    </div>
    <div class="midd common_drag"></div>
    <!-- right -->
    <div class="right flex cur_poi">
      <div class="info flex">
        <div class="avatar bd_radio flex">
          <img
            class="bd_radio"
            style="width: 40px; height: 40px"
            :src="store.profile?.user?.headimgurl"
            alt=""
          />
        </div>
        <div class="nickName fs_14 fff">
          {{ store.profile?.user?.nickname }}
        </div>
      </div>
      <div v-for="(icon, i) in rightIcons" :key="i + 1">
        <img
          @click="icon.iconFun(icon)"
          class="cur_poi"
          :src="i !== 4 ? icon.url : icon.urlObj[icon.isShow]"
          alt=""
        />
      </div>
    </div>

    <div class="oneDial">
      <el-dialog
        :show-close="false"
        :destroy-on-close="true"
        :draggable="true"
        :modal="false"
        v-model="isWinOne"
        title="请选择账号"
        width="500"
        center
      >
        <div class="oneMain">
          <div class="rooms_box">
            <div
              @click="chooseAccount(item)"
              class="out cur_poi flex"
              v-for="(item, i) in unionActList"
              :key="i"
            >
              <template v-if="item?.add">
                <div class="item_content flex_row">
                  <div class="" style="background: none">
                    <img style="height: 38px" :src="item.headimgurl" alt="" />
                  </div>
                </div>
                <div class="fs_14" style="color: #ff3395">
                  {{ item.name }}
                </div>
              </template>
              <template v-else>
                <div class="item_content flex_row">
                  <div class="avatar">
                    <img :src="item.headimgurl" alt="" />
                  </div>
                  <div class="info flex_colm bs_bdb fff">
                    <div class="fs_12">{{ item.nickname || "" }}</div>
                    <div class="fs_12">{{ item.id || "" }}</div>
                  </div>
                </div>
                <div class="fff fs_12">选择</div>
              </template>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <div class="twoDial">
      <el-dialog
        :show-close="false"
        :destroy-on-close="true"
        :draggable="true"
        :modal="false"
        v-model="isUnion"
        title="请选择公会房间"
        width="500"
        center
      >
        <div class="twoMain rooms_box">
          <div class="rooms_box" v-if="isUnion">
            <div
              :class="{ isSelect: store.roomLiveInfo.id == item.id }"
              class="out cur_poi flex"
              @click="linkToChannel(item)"
              v-for="(item, i) in unionRoomList"
              :key="i"
            >
              <div class="item_content flex_row">
                <div class="avatar">
                  <img :src="item.img" alt="" />
                </div>
                <div class="info flex_colm bs_bdb fff">
                  <div class="fs_12">{{ item.name || "" }}</div>
                  <div class="fs_12">{{ item.id || "" }}</div>
                </div>
              </div>
              <div
                v-if="item.id == store.profile.user.roomid"
                class="fs_14"
                style="margin-right: 15px; color: #ed2fc2"
              >
                主房间
              </div>
              <div class="fff fs_12">选择</div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 消息 -->

    <div class="threeDial">
      <el-dialog
        :show-close="false"
        :destroy-on-close="true"
        :draggable="true"
        :modal="false"
        v-model="threeDial"
        width="500"
        center
      >
        <div class="threeMain">
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <img
              class="cur_poi"
              src="../assets/refresh_fff.png"
              style="width: 15px; height: 15px"
              alt=""
            />
            <div>
              <img
                class="cur_poi"
                style="width: 25px; height: 25px"
                src="../assets/head_imgs/head_reduce.png"
                alt=""
              />
              <img
                class="cur_poi"
                style="width: 25px; height: 25px"
                src="../assets/close_head.png"
                alt=""
              />
            </div>
          </div>
          <el-tabs
            v-model="activeNameMsg"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane label="消息" name="1"></el-tab-pane>
            <el-tab-pane label="联系人" name="2"></el-tab-pane>
            <el-tab-pane label="谁看过我" name="3"></el-tab-pane>
            <el-tab-pane label="好友申请" name="4"></el-tab-pane>
            <el-tab-pane :name="5">
              <template #label>
                <img
                  @click.stop="handleImageClick"
                  class="el-tabs__item"
                  style="width: 20px; height: 20px; flex: 0"
                  src="../assets/search_btn.png"
                  alt=""
                />
              </template>
            </el-tab-pane>
          </el-tabs>
          <div
            class="heand_right_tabs flex_bt"
            v-if="sysMsgList.length"
            v-for="item in sysMsgList"
            :key="item.uid"
          >
            <div class="left barList flex">
              <div
                class="img bd_radio"
                style="width: 30px; height: 30px; margin-right: 15px"
              >
                <img
                  class="bd_radio"
                  style="width: 100%; height: 100%"
                  :src="item.headimgurl"
                  alt=""
                />
              </div>
              <div class="">
                <div class="top flex">
                  <div
                    class="text fs_14 flex"
                    style="
                      width: 30px;
                      margin-right: 15px;
                      display: -webkit-box;
                      -webkit-line-clamp: 1;
                      -webkit-box-orient: vertical;
                      overflow: hidden;
                    "
                  >
                    {{ item.nickname }}
                  </div>
                  <div class="icon flex">
                    <img
                      style="height: 10px; margin-right: 10px"
                      :src="
                        store.getRichLevel({
                          val: item.giftcoin,
                          ty: 'rich',
                        }).url
                      "
                      alt=""
                    />
                    <img
                      style="height: 12px"
                      :src="
                        store.getRichLevel({
                          val: item.giftcoin,
                          ty: 'charm',
                        }).url
                      "
                      alt=""
                    />
                  </div>
                </div>
                <div class="down">会话最后一条</div>
              </div>
            </div>
            <div class="right">
              <div
                class="fs_12 fff cur_poi"
                style="
                  padding: 5px 16px;
                  box-sizing: border-box;
                  font-size: 12px;
                  background: linear-gradient(88deg, #a13cf3 0%, #7e6bfb 100%);
                  border-radius: 50px 50px 50px 50px;
                "
              >
                聊天
              </div>
            </div>
          </div>
        </div>
      </el-dialog>

      <div class="fourDial">
        <el-dialog
          :destroy-on-close="true"
          :draggable="true"
          :modal="false"
          v-model="fourDial"
          width="240"
          center
        >
          <div class="fourMain">暂无显示</div>
        </el-dialog>
      </div>
    </div>
    <div class="searchDial">
      <el-dialog
        :destroy-on-close="true"
        :show-close="true"
        :draggable="true"
        :modal="false"
        v-model="searchDial"
        width="500"
        center
      >
        <div class="searchMain">
          <h4 class="txt_cent" style="margin-bottom: 10px">搜索</h4>
          <el-input
            v-model="searchInpAll"
            class="searchInp"
            style="max-width: 600px"
            type="text"
            placeholder="用户昵称/用户ID/靓号"
          >
            <template #prepend>
              <el-button :icon="Search" />
            </template>
          </el-input>
          <div class="searchList flex">
            <div class="rooms_box">
              <div
                style="background: none !important; border: 4px solid red"
                class="out cur_poi flex"
                v-for="(item, i) in unionRoomList"
                :key="i"
              >
                <div class="item_content flex_row">
                  <div class="avatar">
                    <img :src="item.img" alt="" />
                  </div>
                  <div class="info flex_colm bs_bdb fff">
                    <div class="fs_12">{{ item.nickname || "" }}</div>
                    <div class="fs_12">{{ item.id || "" }}</div>
                  </div>
                </div>
                <div class="fff fs_12">选择</div>
              </div>
            </div>
            <img
              class="nullImg"
              v-if="false"
              src="../assets/null.png"
              style="width: 100px; height: 100px; object-fit: contain"
              alt=""
            />
          </div>
        </div>
      </el-dialog>
    </div>
    <div class="accountDial">
      <el-dialog
        :show-close="false"
        v-model="isAccountWin"
        title="绑定子账号"
        width="500"
        center
      >
        <div class="accountWin">
          <el-form :model="accountForm">
            <el-row>
              <el-col :span="24" class="flex">
                <el-form-item>
                  <img
                    class="cur_poi"
                    @click="randomAvatar"
                    :src="accountForm.randomAvatarVal"
                    style="height: 100px; border: 1px solid red"
                    alt=""
                  />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="24">
                <el-form-item label="账号:">
                  <el-input></el-input>
                </el-form-item>
              </el-col> -->
              <el-col :span="24">
                <el-form-item label="昵称:">
                  <el-input v-model="accountForm.nickname">
                    <template #append>
                      <el-button @click="randomName">随机</el-button>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button color="#1d1f22" @click="submitCreateAccount">
              保存
            </el-button>
            <el-button color="#ffffff" @click="isAccountWin = false"
              >取消</el-button
            >
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {
  getUnionRooms,
  getUnionAccount,
  msgByCookiApi,
  friendAskListApi,

  whoLookMeApi,
  createSonAccountApi,
  randomNameApi,
  sonAccountApi,

} from "../http";
import { useCounterStore } from "../store";
import { computed, onMounted, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
const { ipcRenderer } = require("electron");

const store = useCounterStore();
const searchInpAll = ref("");
const activeNameMsg = ref("1");
const fourDial = ref(false);
const unionRoomList = ref([]);
const threeDial = ref(false);
const isZoom = ref(true);
const isWinOne = ref(false);
const sysMsgList = ref([]);
const unionActList = ref([]);
const isAccountWin = ref(false);
const accountForm = ref({});
const rightIcons = ref([
  {
    url: new URL("../assets/arr_down.png", import.meta.url).href,
    isShow: true,
    iconFun: function () {
      console.log("点我了");
      getUnionAccount().then((res) => {
        if (res.data.errcode === 0) {
          let tempArr = res.data.data.item;
          let tempOb = {
            add: "add",
            headimgurl: new URL("../assets/subAccAdd.png", import.meta.url),
            name: "绑定小号",
          };
          unionActList.value = [...tempArr, tempOb];
          isWinOne.value = !isWinOne.value;
        }
      });
    },
  },
  {
    url: new URL("../assets/head_imgs/head_msg.png", import.meta.url).href,
    isShow: true,
    iconFun: async function () {
      console.log("点我了-消息");
      handleClick();
      threeDial.value = !threeDial.value;
      console.log("activeNameMsg.value", activeNameMsg.value);
    },
  },
  {
    url: new URL("../assets/head_imgs/head_serv.png", import.meta.url).href,
    isShow: true,
    iconFun: function () {
      console.log("点我了- 克风");
      fourDial.value = !fourDial.value;
    },
  },
  {
    url: new URL("../assets/head_imgs/head_reduce.png", import.meta.url).href,
    isShow: true,
    iconFun: function () {
      ipcRenderer.send("windows_minimize");
    },
  },
  {
    urlObj: {
      true: new URL("../assets/head_imgs/head_zoom_big.png", import.meta.url)
        .href,
      false: new URL(
        "../assets/head_imgs/head_zoom_small.png",
        import.meta.url
      ),
    },
    isShow: true,
    iconFun: function () {
      console.log("1111111111111111", this.isShow);
      if (this.isShow) {
        ipcRenderer.send("windows_fullscreen");
      } else {
        ipcRenderer.send("windows_setmaximize");
      }
      isZoom.value = !isZoom.value;
      this.isShow = !this.isShow;
    },
  },
  {
    url: new URL("../assets/head_imgs/head_close.png", import.meta.url).href,
    isShow: true,
    iconFun: function () {
      ipcRenderer.send("windows_close");
      store.roomContent
        ?.leaveRoom()
        .then((res) => {
          console.log("leaveRoom success", res);
        })
        .catch((err) => {
          console.error(err, "leaveRoom fail", err);
        });
    },
  },
]);
const isUnion = ref(false);
const handleSwitch = () => {
  getUnionRooms().then((res) => {
    console.log("getUnionRooms-res", res);
    if (res.data.errcode === 0) {
      unionRoomList.value = res.data.list;
      isUnion.value = !isUnion.value;
    }
  });
};

const handleClick = async (e) => {
  // console.log("handleClick-e", e, e.props.name);
  activeNameMsg.value = e?.props?.name || "1";
  if (activeNameMsg.value == "1") {
    console.log("1111111");
    let res = await msgByCookiApi({ uids: store.uidStr });
    console.log("消息---res", res);
    if (res.data.errcode === 0) {
      sysMsgList.value = res.data.userlist;
      console.log("getststemmsgApi-res", sysMsgList.value);
    }
  }
  if (activeNameMsg.value == "2") {
    console.log("222222");
    sysMsgList.value = [];
  }
  if (activeNameMsg.value == "3") {
    let res = await whoLookMeApi({ page: 1, limit: 10, source: 1 });
    console.log("3333333-res", res);
    sysMsgList.value = [];
  }
  if (activeNameMsg.value == "4") {
    let res = await friendAskListApi({ page: 1, limit: 10 });
    console.log("4444444-res", res);
    sysMsgList.value = [];
  }
};
const searchDial = ref(false);

const handleImageClick = (e) => {
  console.log("handleImageClick-e", e);
  searchDial.value = true;
};
const linkToChannel = (val) => {
  console.log("linkToChannel-val", val);
  store.mittOb.emit("linkToChannelRoom", val);
  isUnion.value = false;
};
const chooseAccount = async (val) => {
  console.log("val", val);
  if (val.add) {
    isWinOne.value = false;
    randomAvatar();
    randomName();
    isAccountWin.value = true;
  } else {
    let res = await sonAccountApi(val.id);
    if (res.data.errcode === 0) {
      store.profile = res.data.data;
    }
  }
};

const avatarList = ref([
  new URL("../assets/1.png", import.meta.url).href,
  new URL("../assets/2.png", import.meta.url).href,
  new URL("../assets/3.png", import.meta.url).href,
  new URL("../assets/4.png", import.meta.url).href,
  new URL("../assets/5.png", import.meta.url).href,
]);
const randomAvatarVal = ref("");
const randomAvatar = () => {
  let rd = Math.floor(Math.random() * (avatarList.value.length - 1));
  accountForm.value.randomAvatarVal = avatarList.value[rd];
};

const randomName = async () => {
  let res = await randomNameApi();
  console.log("randomName-res", res);
  if (res.data.errcode === 0) {
    accountForm.value.nickname = res.data.data.nickname;
  }
};
const submitCreateAccount = async () => {
  let res = await createSonAccountApi({
    optype: "creatuuid",
    nickname: accountForm.value.nickname,
    headimgurl: accountForm.value.randomAvatarVal,
    sex: 0,
  });
  if (res.data.errcode === 0) {
    isAccountWin.value = false;
  }
  console.log("createAccount-res:::", res);
};

onMounted(async () => {

});
</script>

<style lang="scss" scoped>
.head_container {
  width: 100%;
  height: 60px;
  background: #1d1f22;

  .left {
    .left_inner {
      width: 280px;
      padding: 13px 12px;
      box-sizing: border-box;
      img {
        width: 36px;
        height: 36px;
        margin-right: 16px;
      }
      .two {
        .switch_btn {
          font-size: 16px;
          color: #ffffff;
          text-align: center;
          padding: 6px 11px;
          box-sizing: border-box;
          background: linear-gradient(90deg, #ff21ce 0%, #ff3166 100%);
          border-radius: 50px 50px 50px 50px;
          margin-right: 6px;
        }
      }
    }
  }
  .midd {
    height: 100%;
    flex: 1;
  }
  .right {
    .info {
      .nickName {
        margin: 0 20px 0 5px;
      }
    }
    img {
      width: 24px;
      height: 24px;
      margin: 0 10px;
    }
  }
  .rooms_box {
    width: 100%;
    height: 100%;
    .out {
      background: #51585d;
      border-radius: 10px 10px 10px 10px;
      margin-bottom: 12px;
      padding: 5px 10px;
      box-sizing: border-box;
    }
    .item_content {
      flex: 1;
      overflow-y: auto;
      box-sizing: border-box;
      .avatar {
        width: 38px;
        height: 38px;
        background: #ffffff;
        border-radius: 50%;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .info {
        padding: 5px;
        .icons_sort {
          margin-top: 6px;
        }
      }
    }
  }
  .heand_right_tabs {
  }
}

:deep(.oneDial .el-dialog) {
  margin: 0 !important;
  width: 320px;
  // height: 355px;
  background: #282c2f;
  position: absolute;
  right: 68px;
  top: 60px;
  z-index: 99;
  .el-dialog__body {
    padding: 0 10px;
    overflow: auto;
    height: calc(355px - 40px);
    box-sizing: border-box;
  }
  .el-dialog__title {
    color: #ffffff !important;
    padding-top: 15px;
    box-sizing: border-box;
    font-size: 16px;
  }
}
:deep(.twoDial .el-dialog) {
  margin: 0 !important;
  position: absolute;
  z-index: 99;
  left: 26px;
  top: 61px;
  width: 331px;
  background: #282c2f;
  border-radius: 0px 0px 0px 0px;
  box-sizing: border-box;
  padding: 10px;
  .el-dialog__body {
    padding: 0 10px;
    overflow: auto;
    height: calc(355px - 40px);
    box-sizing: border-box;
  }
  .el-dialog__title {
    color: #ffffff !important;
    padding-top: 15px;
    box-sizing: border-box;
    font-size: 16px;
  }
}
:deep(.threeDial .el-dialog) {
  background: #282c2f;
  border-radius: 5px 5px 5px 5px;
  margin: 0 !important;
  position: absolute;
  z-index: 99;
  right: 9px;
  top: 61px;
  width: 380px;
  box-sizing: border-box;
  .el-dialog__body {
    height: 600px;
  }
}
.demo-tabs {
  box-sizing: border-box;
  :deep(.el-tabs__header) {
    margin-bottom: 0;
  }
  :deep(.el-tabs__nav) {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  :deep(.el-tabs__item) {
    color: #fff;
    flex: 1;
    text-align: center;
    padding: 0;
  }
  //
  :deep(.el-tabs__nav-wrap:after) {
    height: 0 !important;
  }
  :deep(.el-tabs__item.is-active) {
    color: #9d42f3;
  }
  :deep(.el-tabs__active-bar) {
    height: 0;
    background-color: none !important;
  }
}
:deep(.fourDial .el-dialog) {
  height: 320px;
  width: 240px;
  background: #282c2f;
  .el-dialog__close {
    color: #fff !important;
  }
}
:deep(.accountDial .el-dialog) {
  background: #282c2f;
  .el-dialog__title {
    color: #ffffff !important;
  }
}
:deep(.searchDial .el-dialog) {
  background: #141f31;
  width: 300px;
  .el-dialog__body {
    height: 400px;
    // background: yellow;
  }
  .el-dialog__title {
    color: #ffffff !important;
  }
  .searchInp {
    --el-input-focus-border-color: #ffffff;
  }
  .searchList {
    height: calc(100% - 30px);
    background: none !important;
    box-sizing: border-box;
    overflow: auto;
    .rooms_box {
      margin-top: 15px 0;
      height: calc(400px - 30px);
      overflow-y: auto;
      box-sizing: border-box;
    }
  }
}
.isSelect {
  border: 1px solid #895cf8;
}
</style>
